<template>
  <BorderBox8 style="width: 100%; height: 100%">
    <div class="content">
      <div>
        <h3
          style="
            margin-bottom: 0px;
            padding-bottom: 0px;
            color: #67e0e3;
            font-size: 24px;
          "
        >
          年度订单总览
        </h3>
      </div>
      <table style="width: 100%; margin-top: 0px">
        <thead>
          <th>订单类型</th>
          <th>订单状态</th>
          <th>完成率</th>
        </thead>
        <tbody style="font-size: 18px">
          <tr>
            <td class="center-td" style="color: #67e0e3">涂布订单</td>
            <td class="center-td" style="color: #67e0e3">74/118</td>
            <td class="center-td" style="color: #67e0e3">62.7%</td>
          </tr>
          <tr>
            <td class="center-td" style="color: #67e0e3">分切订单</td>
            <td class="center-td" style="color: #67e0e3">227/338</td>
            <td class="center-td" style="color: #67e0e3">67.1%</td>
          </tr>
          <tr>
            <td class="center-td" style="color: #67e0e3">模切订单</td>
            <td class="center-td" style="color: #67e0e3">28/32</td>
            <td class="center-td" style="color: #67e0e3">87.5%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </BorderBox8>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { BorderBox8 } from "@kjgl77/datav-vue3";
</script>
<style scoped lang="less">
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// .tableHeader {
//   width: 50px;
// }
.center-td {
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}
</style>
